<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="人员管理">
			<view slot="right" @click="search"><u-icon name="search" size="20" color="#162233"></u-icon></view>
		</u-navbar>
		<d-select :options="options" @query="searchData"></d-select>

		<view class="d-p-30">
			<view class="card d-p-30">
				<view class="d-flex d-m-b-30">
					<view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">人员信息</view>
					<view class="d-font-26 d-flex" style="color: #ADB4BD;"><text style="position: relative;top: -2rpx;">单位：人</text></view>
				</view>
				<memberChart :count="count"></memberChart>
			</view>

			<view class="d-font-32 d-m-t-30" style="font-weight: bold;color: #323334;">人员列表</view>
			<view class="d-m-t-30 card d-p-30" v-for="(item, index) in list" :key="index" @click="memberDetail(item)">
				<view class="d-flex">
					<view class="d-font-28" style="font-weight: bold;color: #151C24;">{{ item.xm }}</view>
					<view class="d-font-28 d-m-l-70" style="color: #5D6672;">{{ item.xb }}</view>
					<view class="d-m-l-20 d-m-r-10"><u-line direction="col" length="36rpx" color="#DFDFDF"></u-line></view>
					<view class="tag d-flex">{{ item.smrz }}</view>
					<view class="d-m-l-20 d-m-r-10"><u-line direction="col" length="36rpx" color="#DFDFDF"></u-line></view>
					<view class="d-font-28" style="color: #21A5F3;">{{ item.ryzt }}</view>
					<view class="d-flex-1"></view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-10" style="color: #5D6672;">项目名称</view>
						<view class="d-flex-1" style="color: #162233;">{{ item.gcmc || '无数据源' }}</view>
					</view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex u-line-1" style="flex: 3;">
						<view class="d-m-r-10" style="color: #5D6672;">公民身份号码</view>
						<view style="color: #162233;">{{ item.zjhm || '无数据源' | str }}</view>
					</view>
					<view class="d-flex" style="flex: 2;">
						<view class="d-m-r-10" style="color: #5D6672;">所属区划</view>
						<view style="color: #162233;">{{ item.districtName || '无数据源' }}</view>
					</view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-10" style="color: #5D6672;">班组名称</view>
						<view class="d-flex-1" style="color: #162233;">{{ item.bzmc || '无数据源' }}</view>
					</view>
					<view class="d-flex" style="flex: 2;">
						<view class="d-m-r-10" style="color: #5D6672;">从事工种</view>
						<view style="color: #162233;">{{ item.zwzc || '无数据源' }}</view>
					</view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-10" style="color: #5D6672;">当天考勤</view>
						<view style="color: #ADB4BD;">{{ item.attendance || '无数据源' }}</view>
					</view>
					<view class="d-flex" style="flex: 2;">
						<view class="d-m-r-10" style="color: #5D6672;">本月工资</view>
						<view style="color: #ADB4BD;">{{ item.salary || '无数据源' }}</view>
					</view>
				</view>
			</view>

			<template v-if="!list || list.length <= 0">
				<view><u-empty icon="/static/image/none.png" :text="'暂无数据'"></u-empty></view>
			</template>
		</view>
	</view>
</template>

<script>
import memberChart from '../components/memberChart.vue';
import { staffsdistribute, staffs, appNation, dictList } from '../../../common/api.js';
export default {
	components: {
		memberChart
	},
	data() {
		return {
			count: null,
			options: [],
			queryParams: {},
			list: [],
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			districtId: null
		};
	},
	onLoad(e) {
		this.districtId = e.districtId;
		this.init();
	},
	onReachBottom() {
		if (this.pageLast > this.pageNum) {
			++this.pageNum;
			this.getList().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			let district, smrz, ryzt;
			appNation()
				.then(e => {
					district = e.data.map(e => {
						return {
							id: e.districtId,
							label: e.districtName
						};
					});
				})
				.then(() => {
					return dictList({
						type: 'smrz'
					}).then(e => {
						smrz = e.data.map(e => {
							return {
								id: e.dictValue,
								label: e.dictLabel
							};
						});
					});
				})
				.then(() => {
					return dictList({
						type: 'ryzt'
					}).then(e => {
						ryzt = e.data.map(e => {
							return {
								id: e.dictValue,
								label: e.dictLabel
							};
						});
					});
				})
				.then(() => {
					this.options = [
						{
							label: '属地',
							name: 'districtId',
							noall: true,
							default: this.districtId,
							children: district
						},
						{
							label: '是否认证',
							name: 'smrz',
							children: smrz
						},
						{
							label: '人员状态',
							name: 'ryzt',
							children: ryzt
						}
					];
				})
				.then(() => {
					this.getData();
				});
		},
		getData() {
			staffsdistribute({
				params: {
					deptId: this.$user.deptId,
					districtId: this.districtId, // 默认值
					...this.queryParams
				}
			}).then(e => {
				this.count = e.data;
			});
			this.pageNum = 1;
			this.getList().then(e => {
				this.list = e.data;
				this.pageLast = Math.ceil(e.total / this.pageSize);
			});
		},
		getList() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			return staffs({
				params: {
					deptId: this.$user.deptId,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					districtId: this.districtId, // 默认值
					...this.queryParams
				}
			}).then(e => {
				uni.hideLoading();
				return e;
			});
		},
		searchData(e) {
			this.queryParams = e;
			this.getData();
		},
		search() {
			uni.$u.route({
				url: '/pages/index/member/search'
			});
		},
		memberDetail(item) {
			uni.$u.route({
				url: '/pages/index/member/memberDetail',
				params: {
					id: item.id
				}
			});
		}
	}
};
</script>

<style lang="scss">
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
	.tag {
		height: 32rpx;
		background: #ffb61d;
		border-radius: 4rpx;
		color: #ffffff;
		font-size: 20rpx;
		padding: 0 10rpx;
	}
}
page {
	background-color: #fbfcfc;
}
</style>
